
<template>
  <div class="form">
    <div class="searchi">
      <input type="text" class="sear-text" placeholder="输入搜索的物品名称" />
      <button type="button" class="sear-btn">搜索</button>
    </div>
  </div>
<!-- 	<span  v-if="userStore.isAuthenticated==false">
	未登录</span>
	<span  v-if="userStore.isAuthenticated==true">
		已登录，欢迎您，{{userStore.user.sub}}
		<button @click="logout"> 登出</button>
	</span> -->
	  <div class="content">
	   <!-- 轮播图 -->
	      <div class="carousel-container">
	        <el-carousel :interval="4000" type="card" height="400px" >
	          <el-carousel-item v-for="item in imgSUrl" :key="item">
	             <h3 justify="center">
					 <img :src="item">
				 </h3>
	          </el-carousel-item>
	        </el-carousel>
	      </div>
	          <!-- 轮播图END -->
	      <div style="margin-top: 50px;">    
	           <el-card shadow="never">
	          每日推荐
	          </el-card>
	      </div>
	<AllView/>
	</div>
	</template>

<script setup lang="ts">
	import AllView from "@/components/AllView.vue"
	import HeaderBar from "@/components/HeaderBar.vue";
	import BottomBar from "@/components/BottomBar.vue";
	import { useAuthStore } from "@/stores";
	import router from '@/router'
	import axios from 'axios';
	import { onMounted, ref } from "vue";
	import {getOneMainPic,homeCarousel} from '@/api/pic'
	const userStore = useAuthStore();
	let pic = ref("")
	console.log("userStore:",userStore)
	getOneMainPic("1").then((res) => {
		pic.value= res.data.picContent
		console.log("pic===========",pic.value)
	})	
	function logout(){
		      localStorage.clear()
		      // 跳转到登录页
		      
			  userStore.setAuth(false);
			  userStore.setUser();
			  router.go(0)
			  
	}
	homeCarousel().then((res)=>{
		console.log("轮播缓存RES",res)
	});
	const imgSUrl=[
		"https://store-yy.oss-cn-wulanchabu.aliyuncs.com/lbt1.jpg?Expires=1710554208&OSSAccessKeyId=TMP.3KkeCTMCfkDSoCqmjCBUu7kG5R1TFpmZULLQoSPFHDd2wpZ2XTbCtmrqArSuAKiikUtr5yYMRSGGwttkYWec9dWpmxJewZ&Signature=dWdkJXORfHyjOKqfdfTfop6WJhU%3D",
        "https://img.tukuppt.com/bg_grid/00/15/30/f0b9cvnnPD.jpg!/fh/350",
          "https://ts1.cn.mm.bing.net/th/id/R-C.79ed075aaedd7cda4ad08bdc364252cd?rik=NtuvWGnL%2bwiwzA&riu=http%3a%2f%2fwww.dmaku.com%2fdemo%2fmoban%2f2017052552491025%2fimages%2fsycase3.jpg&ehk=7P7XTGB%2b3D9S5IKXMYoPamwyTG6H1jPcHd%2fsTl7FTfg%3d&risl=&pid=ImgRaw&r=0",
          "https://img.tukuppt.com/ad_preview/00/19/11/5c99f7c852662.jpg!/fw/980"
      ]
</script>

<style>
/* 全局CSS */
.form {
  width: 1000px;
  height: 80px;
  margin: 15px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchi {
  display: flex;
  border: 3px solid #639dc4;
  border-radius: 5px;
  height: 55px;
  line-height: 55px;
  align-items: center;
  .sear-text {
    width: 480px;
    height: 30px;
    border: none;
    padding: 5px 0 5px 10px;
    outline: none;
  }
  .sear-btn {
    height: 100%;
    width: 80px;
    border: none;
    background-color: #639dc4;
    font-size: 20px;
    color: #ffffff;
  }
}
/*内容*/
.content {
  width: 1400px;
  margin: 0 auto;
}
* {
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
}

#app .el-header {
  padding: 0;
}

#app .el-main {
  min-height: 300px;
  padding: 20px 0;
}

#app .el-footer {
  padding: 0;
}

a,
a:hover {
  text-decoration: none;
}

/* 全局CSS END */

/* 顶部导航栏CSS */
.topbar {
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;
}

.topbar .nav {
  width: 1225px;
  margin: 0 auto;
}

.topbar .nav ul {
  float: right;
}

.topbar .nav li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
}

.topbar .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}

.topbar .nav li .el-button {
  color: #b0b0b0;
}

.topbar .nav .el-button:hover {
  color: #fff;
}

.topbar .nav li a {
  color: #b0b0b0;
}

.topbar .nav a:hover {
  color: #fff;
}

.topbar .nav .shopCart {
  width: 120px;
  background: #424242;
}

.topbar .nav .shopCart:hover {
  background: #fff;
}

.topbar .nav .shopCart:hover a {
  color: #ff6700;
}

.topbar .nav .shopCart-full {
  width: 120px;
  background: #ff6700;
}

.topbar .nav .shopCart-full a {
  color: white;
}

/* 顶部导航栏CSS END */

/* 顶栏容器CSS */
.el-header .el-menu {
  max-width: 1225px;
  margin: 0 auto;
}

.el-header .logo {
  height: 60px;
  width: 189px;
  float: left;
  margin-right: 100px;
}

.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}

/* 顶栏容器CSS END */

/* 底栏容器CSS */
.footer {
  width: 100%;
  text-align: center;
  background: #2f2f2f;
  padding-bottom: 20px;
}

.footer .ng-promise-box {
  border-bottom: 1px solid #3d3d3d;
  line-height: 145px;
}

.footer .ng-promise-box {
  margin: 0 auto;
  border-bottom: 1px solid #3d3d3d;
  line-height: 145px;
}

.footer .ng-promise-box .ng-promise p a {
  color: #fff;
  font-size: 20px;
  margin-right: 210px;
  padding-left: 44px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-decoration: none;
  background: url("./assets/imgs/us-icon.png") no-repeat left 0;
}

.footer .github {
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
}

.footer .github .github-but {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background: url("./assets/imgs/github.png") no-repeat;
}

.footer .mod_help {
  text-align: center;
  color: #888888;
}

.footer .mod_help p {
  margin: 20px 0 16px 0;
}

.footer .mod_help p a {
  color: #888888;
  text-decoration: none;
}

.footer .mod_help p a:hover {
  color: #fff;
}

.footer .mod_help p span {
  padding: 0 22px;
}
  .carousel-container {
  position: relative;
  top: 10px; /* 将轮播图下调 100px */
}
.carousel-container2{
  position: relative;
  top: 20px; /* 将轮播图下调 100px */
}

  .el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 底栏容器CSS END */
</style>